<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>elementUI表格排序</title>
        <link rel="stylesheet" href="elementUI/theme-default/index.css" /> 
    </head>
    <body>
        <script src="http://unpkg.com/vue/dist/vue.js"></script>
        <script src="http://unpkg.com/element-ui@1.3.5/lib/index.js"></script>
        <div id="app">
            <template>
              <el-table
                :data="tableData5"
                style="width: 100%">
                <el-table-column type="expand">
                  <template scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="商品名称">
                        <span>{{ props.row.name }}</span>
                      </el-form-item>
                      <el-form-item label="所属店铺">
                        <span>{{ props.row.shop }}</span>
                      </el-form-item>
                      <el-form-item label="商品 ID">
                        <span>{{ props.row.id }}</span>
                      </el-form-item>
                      <el-form-item label="店铺 ID">
                        <span>{{ props.row.shopId }}</span>
                      </el-form-item>
                      <el-form-item label="商品分类">
                        <span>{{ props.row.category }}</span>
                      </el-form-item>
                      <el-form-item label="店铺地址">
                        <span>{{ props.row.address }}</span>
                      </el-form-item>
                      <el-form-item label="商品描述">
                        <span>{{ props.row.desc }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="商品 ID"
                  prop="id">
                </el-table-column>
                <el-table-column
                  label="商品名称"
                  prop="name">
                </el-table-column>
                <el-table-column
                  label="描述"
                  prop="desc">
                </el-table-column>
              </el-table>
            </template>
        </div>

        <style>
          .demo-table-expand {
            font-size: 0;
          }
          .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
          }
          .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
          }
        </style>

        <script>
          new Vue({
            el:'#app',
            data() {
              return {
                tableData5: [{
                  id: '12987122',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '荷兰优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }, {
                  id: '12987123',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '荷兰优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }, {
                  id: '12987125',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '荷兰优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }, {
                  id: '12987126',
                  name: '好滋好味鸡蛋仔',
                  category: '江浙小吃、小吃零食',
                  desc: '荷兰优质淡奶，奶香浓而不腻',
                  address: '上海市普陀区真北路',
                  shop: '王小虎夫妻店',
                  shopId: '10333'
                }]
              }
            }
          });
        </script>
    </body>
</html>